<template>
  <div>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :disabled="disabled"
    >
      <div id="header" class="aui-bg-red fixed" style="top: 0"></div>
      <!-- header -->
      <header class="my_header" id="my_header">
        <van-row>
          <van-col span="4" class="header-lt aui-text-center">
            <div class="avatar" v-if="!isLogin" @click="fnOpenLogin"></div>
            <van-uploader :after-read="afterRead" v-if="isLogin" v-cloak>
              <div
                class="avatar"
                id="avatar"
                v-bind:style="{ backgroundImage: 'url(' + user.avatar + ')' }"
                v-lazy="user.avatar"
              ></div>
            </van-uploader>
          </van-col>
          <van-col span="20" class="header-md aui-ftn16">
            <div class="unsign aui-text-center" v-if="!isLogin" v-cloak>
              <div
                class="login_btn aui-ftn16 aui-bg-f aui-text-red"
                @click="fnOpenLogin"
              >
                登 录
              </div>
              <div
                class="register_btn aui-ftn16 aui-bg-red aui-text-f"
                @click="fnOpenRegister"
              >
                注 册
              </div>
            </div>
            <div class="sign aui-text-f" v-if="isLogin" v-cloak>
              <div>
                <div
                  class="name aui-ftn16 aui-font-weight aui-padded-b-5"
                  @click="fnOpenRz"
                >
                  {{ user.realname }}
                </div>
                <div class="nick aui-ftn12" @click="fnOpenUserInfo">
                  {{ user.nickname }}&nbsp;{{ user.mobile }}
                </div>
                <!-- <div class="aui-ftn12">试客ID：{{user.id}}</div> -->
              </div>

              <div
                class="aui-ftn12 aui-text-right"
                @click="fnOpenMoney(user.money)"
              >
                余额&nbsp;<span
                  class="aui-ftn16 aui-font-weight"
                  v-text="user.money"
                ></span
                >&nbsp;元
              </div>
            </div>
          </van-col>
        </van-row>
      </header>
      <!-- main -->
      <section id="main" class="my_main">
        <div class="first">
          <div class="content aui-bg-f">
            <div
              class="
                title
                aui-ftn13
                aui-text-red
                aui-text-left
                aui-border-b
                aui-padded-b-15
                aui-padded-t-15
              "
            >
              我的订单
            </div>
            <van-row class="aui-ftn12 aui-text-center">
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(1)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dshsq.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status1_num && isLogin"
                    v-text="user.status1_num"
                  >
                    88
                  </div>
                </div>
                待审核申请
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(11)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dskyl.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status11_num && isLogin"
                    v-text="user.status11_num"
                  >
                    88
                  </div>
                </div>
                待试客预览
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(12)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dsjsk.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status12_num && isLogin"
                    v-text="user.status12_num"
                  >
                    88
                  </div>
                </div>
                待商家审图
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(2)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dtddh.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status2_num && isLogin"
                    v-text="user.status2_num"
                  ></div>
                </div>
                待填订单号
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(3)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dshdd.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status3_num && isLogin"
                    v-text="user.status3_num"
                  ></div>
                </div>
                待审核订单
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(16)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dhbh.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status16_num && isLogin"
                    v-text="user.status16_num"
                  ></div>
                </div>
                单号驳回
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(14)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dsjdk.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status14_num && isLogin"
                    v-text="user.status14_num"
                  ></div>
                </div>
                待商家打款
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(15)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dkbh.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status15_num && isLogin"
                    v-text="user.status15_num"
                  ></div>
                </div>
                打款驳回
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(4)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/tgddd.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status4_num && isLogin"
                    v-text="user.status4_num"
                  ></div>
                </div>
                通过的订单
              </van-col>

              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(5)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/yqrsh.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status5_num && isLogin"
                    v-text="user.status5_num"
                  ></div>
                </div>
                已确认收货
              </van-col>

              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(10)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/bhddd.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status10_num && isLogin"
                    v-text="user.status10_num"
                  ></div>
                </div>
                被驳回订单
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(13)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/dpj.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status13_num && isLogin"
                    v-text="user.status13_num"
                  ></div>
                </div>
                待追评
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(6)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/ywc.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status6_num && isLogin"
                    v-text="user.status6_num"
                  ></div>
                </div>
                已完成
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(9)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/ddhwx.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status9_num && isLogin"
                    v-text="user.status9_num"
                  ></div>
                </div>
                订单号无效
              </van-col>
              <van-col
                span="6"
                class="item aui-text-6"
                @click="fnOpenSyRecord(17)"
              >
                <div class="img_cont">
                  <img
                    src="../../assets/my/ydk.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  <div
                    class="badge aui-text-f aui-bg-red aui-ftn12"
                    v-if="user.status17_num && isLogin"
                    v-text="user.status17_num"
                  ></div>
                </div>
                已打款订单
              </van-col>
            </van-row>
          </div>
        </div>
        <!--  <div class="banner" style="background: url('../../assets/my_banner.png') no-repeat center center;background-size: cover" @click="fnOpenSy">
				</div> -->
        <div class="second">
          <div
            class="
              list
              aui-padded-10
              aui-margin-l-10
              aui-margin-r-10
              aui-bg-f
              aui-margin-b-10
              aui-padded-t-0
            "
          >
            <div
              class="
                title
                aui-ftn13
                aui-text-red
                aui-text-left
                aui-border-b
                aui-padded-b-15
                aui-padded-t-15
              "
            >
              活动记录
            </div>
            <div class="list-cont aui-ftn13 aui-text-6">
              <van-row>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenSyRecord(0)"
                >
                  <img
                    src="../../assets/my/gdjl_syjl.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  试用记录
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenFall"
                >
                  <img
                    src="../../assets/my/zhgl_bcj.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  订单差价
                  <div class="cnum" v-text="user.bcnum" v-if="user.bcnum"></div>
                </van-col>
                <!-- <van-col
                  span="8"
                  class="item aui-text-center"
                  @click="fnOpenAnswerRecord"
                >
                  <img
                    src="../../assets/my/hdjl_wdjl.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  问答记录
                </van-col> -->
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenContact"
                >
                  <img
                    src="../../assets/my/hdjl_zxkf.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  联系方式
                </van-col>
              </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenKefu"
                >
                  <img
                    src="../../assets/my/zxkf.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  在线客服
                </van-col>
              </van-row>
            </div>
          </div>

          <div
            class="
              list
              aui-padded-10
              aui-margin-l-10
              aui-margin-r-10
              aui-bg-f
              aui-margin-b-10
              aui-padded-t-0
            "
          >
            <div
              class="
                title
                aui-ftn13
                aui-text-red
                aui-text-left
                aui-border-b
                aui-padded-b-15
                aui-padded-t-15
              "
            >
              帐号管理
            </div>
            <div class="list-cont aui-ftn13 aui-text-6">
              <van-row>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenAddUser"
                >
                  <img
                    src="../../assets/my/zhgl_tjmh.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  添加买号
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenRz"
                >
                  <img
                    src="../../assets/my/zhgl_smrz.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  实名认证
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenModify"
                >
                  <img
                    src="../../assets/my/zhgl_xgmm.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  修改密码
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenMoney(user.money)"
                >
                  <img
                    src="../../assets/my/zhgl_zjgl.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  资金管理
                </van-col>
              </van-row>
            </div>
          </div>

          <div
            class="
              list
              aui-padded-10
              aui-margin-l-10
              aui-margin-r-10
              aui-bg-f
              aui-margin-b-10
              aui-padded-t-0
            "
          >
            <div
              class="
                title
                aui-ftn13
                aui-text-red
                aui-text-left
                aui-border-b
                aui-padded-b-15
                aui-padded-t-15
              "
            >
              提现
            </div>
            <div class="list-cont aui-ftn13 aui-text-6">
              <van-row>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenPayout"
                >
                  <img
                    src="../../assets/my/tx.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  我要提现
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnBindAlipay"
                >
                  <img
                    src="../../assets/my/bindAlipay.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  绑定支付宝
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnBindBank"
                >
                  <img
                    src="../../assets/my/bindBank.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  绑定银行卡
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnBindPhone"
                >
                  <img
                    src="../../assets/my/bindPhone.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  绑定手机号码
                </van-col>
              </van-row>
            </div>

          </div>

          <div
            class="
              list
              aui-padded-10
              aui-margin-l-10
              aui-margin-r-10
              aui-bg-f
              aui-padded-t-0
              aui-margin-b-15
            "
          >
            <div
              class="
                title
                aui-ftn13
                aui-text-red
                aui-text-left
                aui-border-b
                aui-padded-b-15
                aui-padded-t-15
              "
            >
              其他管理
            </div>
            <div class="list-cont aui-ftn13 aui-text-6">
              <van-row>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenInvite"
                >
                  <img
                    src="../../assets/my/qtgl_yqyj.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  邀请有奖
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenRcommend"
                >
                  <img
                    src="../../assets/my/recommendReward.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  推荐有奖
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenHelp"
                >
                  <img
                    src="../../assets/my/qtgl_bzzx.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  帮助中心
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center"
                  @click="fnOpenMerchant"
                >
                  <img
                    src="../../assets/my/qtgl_sjbm.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  商家报名
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center aui-padded-t-15"
                  @click="fnOpenDownload"
                >
                  <img
                    src="../../assets/my/qtgl_appxz.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  APP下载
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center aui-padded-t-15"
                  @click="fnOpenTs"
                >
                  <img
                    src="../../assets/my/qtgl_ts.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  被投诉
                </van-col>
                <van-col
                  span="6"
                  class="item aui-text-center aui-padded-t-15"
                  @click="fnOpenZxUser"
                >
                  <img
                    src="../../assets/my/delUser.png"
                    alt=""
                    class="aui-margin-b-10"
                  />
                  注销帐户
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div
          class="loginout aui-ftn16 aui-text-center aui-bg-f aui-text-6"
          v-if="isLogin"
          @click="fnLoginOut"
          v-cloak
        >
          安全退出
        </div>
      </section>
    </van-pull-refresh>
    <van-button class="kf_btn" round type="danger" @click="utils.openKefu()">
      <img width="38px" height="38px" src="../../assets/index/kf_btn.png" />
    </van-button>
  </div>
</template>

<script>
import "@/styles/my.css";
import User from "../../service/my.js";
import { mapGetters } from "vuex";
export default {
  name: "My",
  data() {
    return {
      isLogin: false,
      user: {
        realname: "alice eason",
        avatar: require("../../assets/touxiang.png"),
        nickname: "nick",
        id: "",
        mobile: "13719691304",
        money: "0.00",
        bcnum: 0
      },
      refreshing: false,
      disabled: false,
    };
  },
  computed: {
    ...mapGetters(["uid"]),
  },
  created() {
    this.utils.getQimo(this.uid);
  },
  mounted() {
    this.init();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    fnGetChild(arr, parentId) {
      let children = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].parentId == parentId) {
          arr[i].c = this.fnGetChild(arr, arr[i].id);
          children.push(arr[i]);
        }
      }
      return children;
    },

    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
        this.init();
      }, 1000);
    },
    init() {
      this.isLogin = this.$store.state.uid ? true : false;
      if (this.isLogin) this.fnGetUser();
    },
    // 获取用户信息
    fnGetUser: function () {
      User.fnGetUserData({ uid: this.$store.state.uid, isToken: true }).then(
        (res) => {
          if (res && res.status) {
            this.user = res.data;
          }
        }
      );
    },
    // 上传头像
    fnChangeAvatar: function (file) {
      let param = new FormData(); // 创建form对象
      let _param = {
        uid: this.$store.state.uid,
        file: file.file,
      };
      for (var i in _param) {
        param.append(i, _param[i]); // 添加form表单中其他数据
      }
      User.fnGetUserAvatar(param).then((res) => {
        if (res.status) this.user.avatar = res.data;
      });
    },

    afterRead(file) {
      //判断图片的大小，单位是字节
      if (file.file.size > 3 * 1024 * 1024) {
        let vm = this;
        this.utils.fnChangeFile(file, { w: 400, h: 400 }, function (res) {
          vm.fnChangeAvatar(res);
        });
      } else {
        // 符合大小的，直接上传
        this.fnChangeAvatar(file);
      }
    },

    // 打开个人资料
    fnOpenUserInfo: function () {
      this.utils.fnOpenCommon(this, {
        name: "user_info",
        query: { title: "个人资料" },
      });
    },
    // 修改个人资料
    fnEditUser: function (nick) {
      this.user.nickname = nick;
    },
    fnOpenLogin: function () {
      this.utils.fnOpenCommon(this, {
        name: "login",
        query: { from: "my", active: 0 },
      });
    },
    fnOpenRegister: function () {
      this.utils.fnOpenCommon(this, {
        name: "login",
        query: { from: "my", active: 1 },
      });
    },
    // 打开试用记录
    fnOpenSyRecord: function (status) {
      this.utils.fnOpenCommon(this, {
        name: "sy_record",
        query: { status: status },
      });
    },
    // 打开添加买家
    fnOpenAddUser: function () {
      if (this.user.is_buynum) {
        this.utils.fnOpenCommon(this, { name: "account" });
      } else {
        this.utils.fnOpenCommon(this, { name: "add_user" });
      }
    },
    // 打开实名认证
    fnOpenRz: function () {
      this.utils.fnOpenCommon(this, {
        name: "rz",
        query: { title: "实名认证" },
      });
    },
    // 打开修改密码
    fnOpenModify: function () {
      this.utils.fnOpenCommon(this, { name: "modify", query: { from: "my" } });
    },
    // 邀请页面
    fnOpenInvite: function () {
      this.utils.fnOpenCommon(this, { name: "invite" });
    },
    // 推荐有奖
    fnOpenRcommend () {
      this.utils.fnOpenCommon(this, {
        name: "recommend",
        query: { title: "推荐有奖", text: "记录" },
      });
    },
    fnOpenKefu: function () {
      // this.utils.fnOpenCommon(this, { name: "kefu" });
      this.utils.openKefu();
    },
    // 联系我们
    fnOpenContact: function () {
      this.utils.fnOpenCommon(this, { name: "contact" });
    },
    // 补差价
    fnOpenFall () {
      this.utils.fnOpenCommon(this, { name: "fall", query: { title: "订单差价", text: "申请差价" } });
    },
    // 打开问答记录
    fnOpenAnswerRecord: function () {
      this.utils.fnOpenCommon(this, { name: "answer_record" });
    },
    // 打开资金管理
    fnOpenMoney: function (money) {
      this.utils.fnOpenCommon(this, {
        name: "money",
        query: { title: "资金管理", money: money },
      });
    },
    // 我要提现
    fnOpenPayout: function () {
      this.utils.fnOpenCommon(this, {
        name: "payout",
        query: { title: "我要提现" },
      });
    },
    // 绑定支付宝
    fnBindAlipay () {
      this.utils.fnOpenCommon(this, {
        name: "bindAlipay",
        query: { title: "绑定支付宝" },
      });
    },
    // 绑定手机号码
    fnBindPhone () {
      this.utils.fnOpenCommon(this, {
        name: "bindPhone",
        query: { title: "绑定手机号" },
      });
    },
    // 绑定银行卡
    fnBindBank () {
      this.utils.fnOpenCommon(this, {
        name: "bindBank",
        query: { title: "绑定银行卡" },
      });
    },
    // 打开商家报名
    fnOpenMerchant: function () {
      this.utils.fnOpenCommon(this, { name: "merchant" });
    },
    // 打开帮助中心
    fnOpenHelp: function () {
      this.utils.fnOpenCommon(this, { name: "help" });
    },
    // 打开APP下载
    fnOpenDownload: function () {
      this.utils.fnOpenCommon(this, { name: "download" });
    },
    // 打开投诉
    fnOpenTs: function () {
      this.utils.fnOpenCommon(this, { name: "ts", query: { title: "被投诉" } });
    },
    fnOpenZxUser: function () {
      this.utils.fnOpenCommon(this, {
        name: "zxUser",
        query: { title: "注销帐户" },
      });
    },
    // 退出登录
    fnLoginOut: function () {
      this.$store.commit("REMOVE_COUNT", { token: {}, uid: "", aeskey: "" });
      this.$store.commit("REMOVE_RZ", false);
      this.$store.commit("REMOVE_CATEGORY", []);
	    this.utils.getQimo('');
      this.isLogin = false;
    },
  },
};
</script>
